<template>
 <el-tabs v-model="activeName" @tab-click="handleClick">
  <div > <el-tab-pane label="线索" name="first">
  
   </el-tab-pane></div>
   <el-tab-pane label="线索池" name="second"  @tab-click="xiansuoclick">
    <CluepoolTab v-if="activeName === 'second'" />
   </el-tab-pane>
 
   
  </el-tabs>
    <!-- 搜索 -->
    <div v-if="activeName === 'first'">
    <div class="common-layout">
      <el-row type="flex" style="background-color:#fff;">
        <el-form :model="pageParams" class="demo-form-inline" ref="Clueformdata">
          <el-form-item label="线索ID" prop="id" >
            <el-input clearable placeholder="请输入" v-model="pageParams.id"    class="my-input" />
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input clearable placeholder="请输入" v-model="pageParams.phone" />
          </el-form-item>
         <el-form-item label="线索归属" prop="customerName">
            <el-input clearable placeholder="请输入" v-model="pageParams.customerName" />
          </el-form-item>

          <el-form-item label="创建日期" prop="startTime">
          <el-date-picker clearable type="date" label="选择日期" placeholder="选择日期" v-model="pageParams.startTime"/>
          </el-form-item>
          <el-form-item label="线索状态" prop="status">
            <el-select clearable placeholder="全部" v-model="pageParams.status" style="width:320px">
               <el-option v-for="item in Cuestatedata" :key="item.id" :value="item.content">  {{item.content}} </el-option>
        
            </el-select>
          </el-form-item>
          <el-form-item label="渠道来源" prop="sourceChannel" >
            <el-select clearable placeholder="请选择" v-model="pageParams.sourceChannel" style="width:320px">
               <el-option v-for="item in disciplineintention" :key="item.id" :value="item.content">  {{item.content}} </el-option>
          
            </el-select>
          </el-form-item>
        </el-form>
        <el-col :span="24" style="display: flex; justify-content:end;margin:-60px 00px 0px -50px">
          <el-button
          class="searchbtn green"
            type="primary"
            size="large"
            style="width:100px;"
            @click="getTableListAPI"
            >搜索</el-button>
          <el-button size="large" style="width:100px"  class="searchbtn" @click="closebtn"> 重置</el-button>
        </el-col>
      </el-row>
    </div>
  
  <!-- 新建线索等按钮 -->
  <el-row class="tablehead">
    <el-col span="10"> 已选<span style="color:#05cc95">12</span>项</el-col>
    <el-col span="10" style="margin-right:50px">
      <el-button 
      type="primary" 
      size="large" 
      style="width:120px;background:#FD7065"
      class="searchbtn "
      :disabled="false"
      @click="dialogFormVisiblebtn">新建线索</el-button
      >
      <el-button 
      type="info"
      plain
      size="large"
      style="width: 120px"
      class="searchbtn"
      :disabled="false"
      @click="Batchdialogbtn"
        >批量添加</el-button>
      <el-button
       type="info" 
       plain
       size="large" 
       class="searchbtn"
       style="width: 120px"
       :disabled="false"
       @click="Distributionbtn">批量分配</el-button>
    </el-col>
 
  </el-row>
  <el-table  :data="list"   
  :default-sort="{ prop:'time',order:'descending' }" 
  @selection-change="handleChange"
   row-key="id"
>
  <el-table-column   align="center" type="selection" width="55" :reserve-selection="true" />
    <el-table-column align="center" width="200px" label="线索ID" prop="id"></el-table-column>
    <el-table-column align="center" label="手机号" prop="phone"></el-table-column>
    <el-table-column align="center" label="渠道来源" prop="sourceChannel"></el-table-column> 
    <el-table-column align="center" label="归属人" prop="customerName"></el-table-column>
    <el-table-column align="center" label="线索状态" prop="status"></el-table-column>
    <el-table-column
    align="center"
     label="下次跟进时间" prop="createTime"
     sortable
     ></el-table-column>
    <el-table-column align="center" label="操作">
      <template v-slot="{ row }">
     
    <span v-if="row.status=='待跟进'"><el-button type="text" @click="goFollowup(row.id)">跟进</el-button></span>
     <span v-if="row.status=='待分配'"><el-button type="text" @click="Distributionbtn">分配</el-button></span>
       <span v-if="row.status=='跟进中'"><el-button type="text" @click="goFollowup(row.id)">跟进中</el-button></span>
      </template>
    </el-table-column>
  </el-table>

<el-col :span="24" style="display:flex;  justify-content: center;margin-top:40px">
    <el-pagination
    v-model:current-page="pageParams.page"
    v-model:page-size="pageParams.pagesize"
    :page-sizes="[9]"
    :small="small"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageParams.total"
    @size-change="handleSizeChange"
    @current-change="changePage"

  />
</el-col>
<!-- 新建线索弹层 -->
  <NewCluedialog v-model:dialogFormVisible="dialogFormVisible" @dialogFormVisible2="dialogFormVisible2"></NewCluedialog>
  <!--  批量添加搜索弹层-->
  <BatchAddition v-model:Batchdialog="Batchdialog" @dialogFormVisiblea="dialogFormVisiblea" ></BatchAddition>
  <!--批量分配线索弹层  -->
  <BatchDistribution v-model:Distributiondialog="Distributiondialog"  @closeDialog="closeDialog" :selectedIds="selectedIds" :Departmendata="Departmendata"></BatchDistribution>
  </div>
</template>
  
<script setup>
import { onMounted, ref } from 'vue'
import { getTableList,getDepartment } from '@/api/home'
// import { ElMessageBox, ElMessage } from 'element-plus'
import NewCluedialog from './components/NewCluedialog .vue'
import BatchAddition from './components/BatchAddition.vue'
import BatchDistribution from './components/BatchDistribution.vue'
import CluepoolTab from './components/CluepoolTab.vue'
import { useRouter } from 'vue-router'
import {cxTabelCourse} from '@/api/course'
const router = useRouter()


const closeDialog = () =>{
 Distributiondialog.value = false

}
const dialogFormVisible2 = () =>{
 dialogFormVisible.value = false

}
const dialogFormVisiblea = () =>{
 Batchdialog.value = false

}
//批量添加线索开关
// const Batchdialog = ref(false)
//批量分配弹窗开关

//表格列表接收
const list = ref([])
//表单
 const Clueformdata = ref(null)
//tb栏切换
const activeName=ref('first')
const handleClick=(tab,event)=>{console.log(tab, event);
activeName.value=tab.props.name }

//参数列表
const pageParams = ref({
  page: 1,
  size: 10,
  total: 0,
  //线索ID
  id: '',
  //归属人
  username: '',
  //手机号
  phone: '',
  //创建时间
 
  //线索状态

  //渠道来源
  sourceChannel: '',
  //开始时间
  startTime:'',
  //结束时间
  endTime:'',
  creatTime:''

})


//重置表单
const closebtn=()=>{
 Clueformdata.value.resetFields()
 getTableListAPI()

}

//发送获取列表请求
const getTableListAPI = async () => {
 const {data,total} = await getTableList(pageParams.value)
 list.value=data
pageParams.value.total=+total

}

//删除


//分页
const changePage = (newPage) => {
  pageParams.value.page = newPage
  getTableListAPI()
}

//去跟进页
const goFollowup=async(id)=>{
  router.push({
    path:`/leadFollowup/${id}`,
  })

}

//获取点击的多选id
const selectedIds =ref([])
// const selectedlength =ref([])
const handleChange=(val)=>{
selectedIds.value =  val.map(item => item.id)
console.log(selectedIds.value)
}



//批量分配弹窗开关
const Distributiondialog =ref(false)
//部门数据
const  Departmendata  =ref([])
//发送部门下拉框请求数据
const Distributionbtn = async () => {
 const { data } = await getDepartment()
 Departmendata.value = data
 console.log(Departmendata.value);
 Distributiondialog.value =ref(true)
 
}
const Batchdialog=ref(false)
const Batchdialogbtn = async () => {
 Batchdialog.value =ref(true)

}
const dialogFormVisible=ref(false)
const dialogFormVisiblebtn = async () => {
 dialogFormVisible.value =ref(true)
}

const disciplineintention = ref([])
const discipline = async () => {
 const { data } = await cxTabelCourse(16)
 disciplineintention.value = data
 console.log( disciplineintention.value);

}

const Cuestatedata = ref([])
const Cuestate = async () => {
 const { data } = await cxTabelCourse(4)
 Cuestatedata.value = data
 console.log( Cuestatedata.value);

}

// 挂载
onMounted(() => {
  getTableListAPI()
})
discipline()
Cuestate()
</script>

<style scoped lang="less">
.demo-form-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;

}

.el-select {
  width: 280px;
  height: 40px;
}
::v-deep .el-input__wrapper {
  width: 280px;
  border-radius: 7px;
  height: 45px;
  background-color: #fdfdfd;

}

.el-form-item {
  display: block;
  margin-left: 20px;
 
}
.demo-tabs {
  background-color: #fff;
}
.searchbtn{
    border-radius: 20px;
}
.green{
    background: #05cc95;
}
.tablehead{
justify-content: space-between;
height:100px;
line-height: 100px;
background-color: #f6f6f6;
}
.el-checkbox__inner::before{
  content:'-';
  position:absolute;
  top:50%;
  left:15%;
  transform:translateY(-50%);
  color:#fff;
}
.el-pagination{
  ::v-deep .el-input__wrapper {
  width: 320px;
  border-radius: 7px;
  height: 30px;
  background-color: #f8f8f8;
}
}

  .el-input {
  width: 320px;
  border-radius: 7px;
  height: 20px;
  background-color: #fbfbfb;
}
 
 .common-layout{
  ::v-deep .el-input__wrapper {
  width: 320px;
  border-radius: 7px;
  height: 45px;
  background-color: #f5f5f5;
}

 }
.el-tabs__content {
height:250px
}

</style>
